<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none
		}

		#box {
			width: 500px;
			height: 650px;
			margin: auto;
			position: relative;
		}

		li {
			float: left;
			width: 125px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			border-bottom: 2px solid #ccc
		}

		#smallImg {
			width: 80px;
			height: 80px;
			position: absolute;
			top: 68px;
			right: 140px;
		}

		.color {
			border-bottom: 2px solid green
		}
	</style>
</head>

<body>

	<div id="box">
		<ul>
			<li class="color">1件</li>
			<li>2件</li>
			<li>3件</li>
			<li>4件</li>
		</ul>
		<img src="img/1.jpg" id="img" alt="" style="width:400px;height: 400px;">
		<img src="img/抢购.jpg" id="smallImg">

		<div id="bottom">
			<h3>￥7.90</h3>
			<p>【韩国原装进口】时怡蜂蜜黄油味薯条</p>
			<p>54g*1</p>
		</div>
	</div>
	<script>
		var lis = [...document.querySelectorAll("li")]
		var img = document.querySelector("#img")
		var curIndex = 0
		// 遍历
		lis.forEach(function (item, index) {
			// 绑定事件
			item.onclick = function () {
				// 切换图片
				img.src = `img/${index + 1}.jpg`
				//  切换类名
				// lis.forEach(function (item) {
				// 	item.classList.remove("color")
				// })
				lis[curIndex].classList.remove("color")
				item.classList.add("color")
				curIndex = index
			}

			// 
		})	
	</script>
</body>

</html>